<template>
  <div class="student-management">
    <!-- 顶部标题和操作区 -->
    <div class="header-section">
      <h2 class="page-title">学生信息管理系统</h2>
      <div class="action-buttons">
        <el-button 
          type="primary" 
          @click="dialogVisible = true" 
          icon="el-icon-plus"
          class="add-btn"
          plain
          round
        >
          添加学生
        </el-button>
      </div>
    </div>

    <!-- 搜索卡片 -->
    <el-card class="search-section" shadow="hover">
      <div class="search-header">
        <i class="el-icon-search"></i>
        <span class="search-title">筛选查询</span>
      </div>
      <el-form :inline="true" :model="form" class="search-form">
        <el-form-item label="姓名">
          <el-input 
            v-model="form.studentName" 
            placeholder="请输入姓名" 
            clearable
            suffix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input 
            v-model="form.number" 
            placeholder="请输入学号" 
            clearable
            suffix-icon="el-icon-tickets"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input 
            v-model="form.className" 
            placeholder="请输入班级" 
            clearable
            suffix-icon="el-icon-school"
          ></el-input>
        </el-form-item>
        <el-form-item class="form-buttons">
          <el-button 
            type="primary" 
            @click="getStudentList" 
            icon="el-icon-search"
            class="search-btn"
          >
            查询
          </el-button>
          <el-button 
            @click="resetSearch" 
            icon="el-icon-refresh-left"
            class="reset-btn"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格区 -->
    <el-card class="table-section" shadow="hover">
      <el-table 
        :data="tableData" 
        style="width: 100%" 
        v-loading="tableLoading"
        stripe
        border
        highlight-current-row
        :header-cell-style="{
          background: 'linear-gradient(to right, #f8f9fa, #e9ecef)',
          color: '#495057',
          fontWeight: '600',
          fontSize: '14px'
        }"
        :row-style="{height:'60px'}"
        :cell-style="{padding:'12px 0'}"
      >
        <el-table-column prop="studentId" label="ID" width="100" align="center"></el-table-column>
        <el-table-column prop="studentName" label="姓名" width="120" align="center"></el-table-column>
        <el-table-column prop="number" label="学号" width="150" align="center"></el-table-column>
        <el-table-column prop="className" label="班级" width="150" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button 
                @click="openEditDialog(scope.row)" 
                type="primary" 
                size="small" 
                icon="el-icon-edit"
                circle
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button 
                @click="handleDelete(scope.row)" 
                type="danger" 
                size="small" 
                icon="el-icon-delete"
                circle
                style="margin-left:10px"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 添加学生对话框 -->
    <el-dialog 
      title="添加学生" 
      :visible.sync="dialogVisible" 
      width="500px"
      :close-on-click-modal="false"
      custom-class="custom-dialog"
    >
      <div class="dialog-body">
        <el-form ref="addFormRef" :model="addForm" label-width="90px" :rules="rules">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="学号:" prop="number">
            <el-input v-model="addForm.number" placeholder="请输入学号"></el-input>
          </el-form-item>
          <el-form-item label="班级:" prop="classId">
            <el-select
              v-model="addForm.classId"
              filterable
              placeholder="请选择班级"
              :loading="loading"
              style="width:100%"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submitAddForm" class="confirm-btn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑学生对话框 -->
    <el-dialog 
      title="编辑学生信息" 
      :visible.sync="dialogVisible2" 
      width="500px"
      :close-on-click-modal="false"
      custom-class="custom-dialog"
    >
      <div class="dialog-body">
        <el-form ref="editFormRef" :model="editForm" label-width="90px" :rules="rules">
          <el-form-item label="ID:">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="editForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="学号:" prop="number">
            <el-input v-model="editForm.number" placeholder="请输入学号"></el-input>
          </el-form-item>
          <el-form-item label="班级:" prop="classId">
            <el-select
              v-model="editForm.classId"
              filterable
              placeholder="请选择班级"
              :loading="loading"
              style="width:100%"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submitEditForm" class="confirm-btn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getStudentList, addStudent, editStudent, deleteStudent } from "@/api/student.js";
import { getClassList } from "@/api/class.js";

export default {
  data() {
    return {
       tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableLoading: false,
      
      form: {
        studentName: "",
        number: "",
        className: ""
      },
      
      dialogVisible: false,
      addForm: {
        name: "",
        number: "",
        classId: ""
      },
      
      dialogVisible2: false,
      editForm: {
        id: "",
        name: "",
        number: "",
        classId: ""
      },
      
      classList: [],
      loading: false,
      
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        number: [{ required: true, message: "请输入学号", trigger: "blur" }],
        classId: [{ required: true, message: "请选择班级", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.getStudentList();
    this.getClassList(); // 初始化加载班级列表
  },
  methods: {
    // 获取学生列表
   getStudentList() {
      this.tableLoading = true;
      getStudentList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      })
        .then(res => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    
    getClassList() {
      this.loading = true;
      getClassList({})
        .then(res => {
          this.classList = res.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.getStudentList();
    },
    
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getStudentList();
    },
    
    openEditDialog(row) {
      this.editForm = {
        id: row.studentId,
        name: row.studentName,
        number: row.number,
        classId: row.classId
      };
      this.dialogVisible2 = true;
    },
    
    submitAddForm() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          const params = {
            name: this.addForm.name,
            number: this.addForm.number,
            class_id: this.addForm.classId
          };
          addStudent(params)
            .then(res => {
              this.$message.success("添加成功");
              this.dialogVisible = false;
              this.getStudentList();
              this.resetAddForm();
            })
        }
      });
    },
    
    submitEditForm() {
      this.$refs.editFormRef.validate(valid => {
        if (valid) {
          const params = {
            id: this.editForm.id,
            name: this.editForm.name,
            number: this.editForm.number,
            class_id: this.editForm.classId
          };
          editStudent(params)
            .then(res => {
              this.$message.success("修改成功");
              this.dialogVisible2 = false;
              this.getStudentList();
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    
    handleDelete(row) {
      this.$confirm("确认删除该学生吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteStudent({ id: row.studentId })
            .then(res => {
              this.$message.success("删除成功");
              this.getStudentList();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {});
    },
    
    resetSearch() {
      this.form = {
        studentName: "",
        number: "",
        className: ""
      };
      this.pageNum = 1; // Reset to first page
      this.getStudentList(); // Refresh the list with cleared filters
    },
  }
};
</script>

<style lang="scss" scoped>
.student-management {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 64px);
  
  .header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .page-title {
      font-size: 22px;
      font-weight: 600;
      color: #343a40;
      margin: 0;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 60%;
        width: 4px;
        background-color: #4285f4;
        border-radius: 2px;
      }
    }
    
    .add-btn {
      padding: 10px 20px;
      font-weight: 500;
      border: none;
      background: linear-gradient(to right, #4285f4, #34a853);
      color: white;
      
      &:hover {
        opacity: 0.9;
        box-shadow: 0 2px 12px 0 rgba(66, 133, 244, 0.3);
      }
    }
  }
  
  .search-section {
    border-radius: 8px;
    margin-bottom: 24px;
    border: none;
    
    .search-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e9ecef;
      
      .el-icon-search {
        font-size: 18px;
        color: #4285f4;
        margin-right: 8px;
      }
      
      .search-title {
        font-size: 16px;
        font-weight: 600;
        color: #495057;
      }
    }
    
    .search-form {
      display: flex;
      flex-wrap: wrap;
      
      .el-form-item {
        margin-right: 24px;
        margin-bottom: 16px;
        
        ::v-deep .el-form-item__label {
          font-weight: 500;
          color: #6c757d;
        }
        
        .el-input {
          width: 220px;
          
          .el-input__inner {
            border-radius: 20px;
            padding-left: 15px;
          }
        }
      }
      
      .form-buttons {
        margin-left: auto;
        
        .search-btn {
          padding: 10px 20px;
          border-radius: 20px;
          background: linear-gradient(to right, #4285f4, #34a853);
          border: none;
        }
        
        .reset-btn {
          padding: 10px 20px;
          border-radius: 20px;
          background: #f8f9fa;
          border: 1px solid #dee2e6;
          color: #495057;
          
          &:hover {
            background: #e9ecef;
          }
        }
      }
    }
  }
  
  .table-section {
    border-radius: 8px;
    border: none;
    
    ::v-deep .el-table {
      border-radius: 8px;
      overflow: hidden;
      
      th {
        font-weight: 600;
      }
      
      .el-button {
        transition: all 0.3s;
        
        &:hover {
          transform: scale(1.1);
        }
      }
    }
    
    .pagination-wrapper {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 对话框样式
::v-deep .custom-dialog {
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    padding: 16px 24px;
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #343a40;
    }
    
    .el-dialog__headerbtn {
      top: 16px;
    }
  }
  
  .dialog-body {
    padding: 24px;
    
    .el-form-item {
      margin-bottom: 20px;
      
      ::v-deep .el-form-item__label {
        font-weight: 500;
        color: #495057;
      }
      
      .el-input__inner {
        border-radius: 6px;
      }
    }
  }
  
  .dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    
    .cancel-btn {
      padding: 10px 20px;
      border-radius: 6px;
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      color: #495057;
      
      &:hover {
        background: #e9ecef;
      }
    }
    
    .confirm-btn {
      padding: 10px 20px;
      border-radius: 6px;
      background: linear-gradient(to right, #4285f4, #34a853);
      border: none;
      
      &:hover {
        opacity: 0.9;
      }
    }
  }
}
</style>